<template>
    <div class="nav">
        <div class="span">
            <div style="width: 50%;transform: skew(-30deg);">数据分析1</div>
        </div>
        <div class="span1">
            <div style="width: 70%;transform: skew(-30deg);">数据分析2</div>
        </div>
        <div class="span3">大数据可视化平台
            <dv-decoration-6 style="width:160px;height:16px;margin: auto;position: relative;top: -14px;" />
        </div>
        <div class="span4">
            <div style="width: 100%;transform: skew(30deg);">vue-big-screen</div>

        </div>
        <div>{{ times }}</div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            time: 0,
            times: 0
        }
    },
    created() {
        this.times = this.getDateYear()
        setInterval(() => {
            this.times = this.getDateYear()
        }, 1000)

    },
    methods: {



        getDateYear() {
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let dates = date.getDate()
            let h = date.getHours()
            let m = date.getMinutes()
            let s = date.getSeconds()
            month = month <= 9 ? '0' + month : month
            dates = dates <= 9 ? '0' + dates : dates
            h = h <= 9 ? '0' + h : h
            m = m <= 9 ? '0' + m : m
            s = s <= 9 ? '0' + s : s
            let dayArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
            let day = date.getDay()
            return year + '-' + month + '-' + dates + ' ' + dayArr[day] + ' ' + h + ':' + m + ':' + s
        }


    }
}
</script>

<style lang="scss" scoped>
.nav {
    color: aliceblue;
    display: flex;
    justify-content: space-between;

    div {
        flex: 1;
        line-height: 60px;
        font-size: 20px;
    }
}

.span {
    width: 20%;
    height: 60px;
    transform: skew(30deg);
    background-color: #2b2e3d93;
    position: relative;
    left: -1%;
    text-indent: 20px;
}

.span1 {
    width: 15%;
    height: 60px;
    transform: skew(30deg);
    background-color: #2b2e3d93;
    position: relative;

    text-indent: 80px;
}

.span3 {
    width: 30%;
    text-align: center;
    line-height: 30px;
    font-size: 16px
}

.span4 {
    width: 15%;
    height: 60px;
    transform: skew(-30deg);
    background-color: #2b2e3d93;
    text-align: center;

}
</style>